<template>
  <input type="text" @input="handleChange" :value="number" />
</template>

<script setup>
import { ref } from 'vue'
/*
// 可选：在失去焦点时清理无效的小数点
input.addEventListener('blur', function() {
  if (this.value.endsWith('.')) {
    this.value = this.value.slice(0, -1);
  }
});

*/
const number = ref()
function handleChange(e) {
  // 获取输入值并移除非数字和多余小数点
  let value = e.target.value

  // 1. 移除非数字字符（保留数字和小数点）
  value = value.replace(/[^\d.]/g, '')

  // 2. 处理多个小数点的情况（只保留第一个）
  const parts = value.split('.')
  if (parts.length > 2) {
    value = parts[0] + '.' + parts.slice(1).join('')
  }

  // 3. 分离整数和小数部分
  const [integerPart = '', decimalPart = ''] = value.split('.')

  // 4. 截断整数部分（最多11位）
  const truncatedInteger = integerPart.slice(0, 11)

  // 5. 截断小数部分（最多4位）
  const truncatedDecimal = decimalPart.slice(0, 4)

  // 6. 重新组合值
  let newValue = truncatedInteger
  if (decimalPart !== undefined) {
    // 如果有小数部分
    newValue += '.' + truncatedDecimal
  }

  // 7. 更新输入框值
  if (value !== newValue) {
    number.value = newValue
  }
}
</script>

<style></style>
